<template>
	<view class="lucky-wheel">
		<view class="header" :style="{ backgroundImage: `url(${image})` }">
			<!-- #ifdef MP || APP-PLUS -->
			<view :style="{ height: `${getHeight.barTop}px` }"></view>
			<view :style="{ height: `${getHeight.barHeight}px` }"></view>
			<!-- #endif -->
			<view class="header-content">
				<view v-if="isContent" class="rules-button" @click="rulesShow = true">抽奖规则</view>
				<view v-if="userList.length" class="marquee-wrapper">
					<noticeBar :showMsg="userList" prefix="恭喜"></noticeBar>
				</view>
				<view class="wheel-container">
					<view class="wheel-panel" :style="{ transform: `rotate(${rotateAngle}deg)` }">
						<view v-for="(item, index) in prizeList" :key="item.id" :style="{ transform: `rotate(${index*360/8}deg) skewY(-45deg)` }" class="item"></view>
					</view>
					<view class="wheel-prize" :style="{ transform: `rotate(${rotateAngle}deg)` }">
						<view v-for="(item, index) in prizeList" :key="item.id" :style="{ transform: `rotate(${(2*index+1)*360/8/2}deg) translateX(-50%)` }" class="item">
							<view class="line1">{{ item.name }}</view>
							<image :src="item.image" class="image"></image>
						</view>
					</view>
					<view class="wheel-point">
						<view class="draw-button" :style="{
						backgroundImage: `url(${imgHost}/statics/images/lottery2.png)`
					}"></view>
						<image :src="`${imgHost}/statics/images/lottery3.png`" class="hand"></image>
						<view class="button" @click="getWiningIndex"></view>
					</view>
				</view>
				<view class="number-wrapper">你获得 <text class="number">{{ lotteryNum }}次</text> 抽奖机会</view>
			</view>
		</view>
		<view class="main-wrapper">
			<!-- 中奖记录 -->
			<view v-if="userList.length && isAll" class="record-wrapper">
				<view class="wrapper-header acea-row row-center-wrapper">
					<view class="title" :style="{
						backgroundImage: `url(${imgHost}/statics/images/lottery5.png),url(${imgHost}/statics/images/lottery6.png)`
					}">中奖记录</view>
				</view>
				<scroll-view scroll-y="true" class="wrapper-main" :style="{
					backgroundImage: `url(${imgHost}/statics/images/lottery7.png)`
				}">
					<view v-for="item in userList" :key="item.id" class="item">恭喜 <text class="mark">{{ item.user ? item.user.nickname : '****' }}</text> 获得 <text
							class="mark">{{ item.prize.name }}</text>
					</view>
				</scroll-view>
			</view>
			<!-- 活动奖品 -->
			<view class="prize-wrapper">
				<view class="wrapper-header">
					<view class="title-box acea-row row-middle" :style="{
						backgroundImage: `url(${imgHost}/statics/images/lottery8.png)`
					}">
						<view class="title" :style="{
							backgroundImage: `url(${imgHost}/statics/images/lottery5.png),url(${imgHost}/statics/images/lottery6.png)`
						}">活动奖品</view>
					</view>
				</view>
				<view class="wrapper-main">
					<view class="list acea-row">
						<template v-for="item in prizeList">
							<view v-if="item.type != 1" :key="item.id" class="item">
								<view class="image-wrap">
									<image :src="item.image" class="image"></image>
								</view>
								<view class="line2">{{ item.name }}</view>
							</view>
						</template>
					</view>
				</view>
			</view>
			<!-- 我的奖品 -->
			<view v-if="myList.length && isPersonal" class="prize-wrapper mine">
				<view class="wrapper-header">
					<view class="title-box acea-row row-middle" :style="{
						backgroundImage: `url(${imgHost}/statics/images/lottery9.png)`
					}">
						<view class="title" :style="{
							backgroundImage: `url(${imgHost}/statics/images/lottery5.png),url(${imgHost}/statics/images/lottery6.png)`
						}">我的奖品</view>
					</view>
				</view>
				<view class="wrapper-main">
					<view class="list">
						<view class="item th acea-row row-middle">
							<view class="mark">序号</view>
							<view class="time">获奖时间</view>
							<view class="">奖品名称</view>
						</view>
						<view v-for="(item, index) in myList" :key="item.id" class="item acea-row row-middle">
							<view class="mark">{{ index + 1 }}</view>
							<view class="time">{{ item.add_time }}</view>
							<view class="line1">{{ item.prize.name }}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="safe-area-inset-bottom"></view>
		</view>
		<!-- 抽奖规则弹窗 -->
		<view v-if="rulesShow" class="mask" @touchmove.stop.prevent="moveHandle"></view>
		<view class="rules-popup" :class="{ active: rulesShow }" @touchmove.stop.prevent="moveHandle">
			<view class="popup-top">
				<view class="title">抽奖规则</view>
			</view>
			<scroll-view scroll-y="true" class="popup-center">
				<view v-html="htmlData"></view>
			</scroll-view>
			<view class="popup-bottom">
				<view class="button acea-row row-center-wrapper" @click="rulesShow = false">我知道了</view>
			</view>
		</view>
		<!-- #ifdef H5 -->
		<template v-if="isWeixin">
			<view class="invite-people-wrap">
				<view class="invite-people-inner">
					<view class="invite-people">
						<view class="">邀请好友<text></text></view>
						<view class="invite" @click="$emit('H5Share')">
							去邀请
						</view>
					</view>
					<view class="safe-area-inset-bottom"></view>
				</view>
			</view>
			<view class="invite-people-placeholder"></view>
			<view class="safe-area-inset-bottom"></view>
		</template>
		<!-- #endif -->
	</view>
</template>

<script>
	import noticeBar from '../components/noticeBar.vue';
	let angleList = [];
	for (let i = 0; i < 8; i++) {
		const angle = -(i * 45 + (45 / 2));
		angleList.push(angle);
	}
	import {
		HTTP_REQUEST_URL
	} from '@/config/app';
	export default {
		props: {
			type: {
				type: String,
				default: ''
			},
			prizeList: {
				type: Array,
				default () {
					return [];
				}
			},
			userList: {
				type: Array,
				default () {
					return [];
				}
			},
			myList: {
				type: Array,
				default () {
					return [];
				}
			},
			htmlData: {
				type: String,
				default: ''
			},
			isPersonal: {
				type: Number,
				default: 0
			},
			isAll: {
				type: Number,
				default: 0
			},
			isContent: {
				type: Number,
				default: 0
			},
			image: {
				type: String,
				default: ''
			},
			lotteryNum: {
				type: Number,
				default: 0
			},
		},
		components: {
			noticeBar,
		},
		data() {
			return {
				imgHost: HTTP_REQUEST_URL,
				rulesShow: false,
				rotateAngle: 0,
				angleList: angleList,
				winingIndex: 0,
				id: 0,
				factor: 0,
				// #ifdef MP || APP-PLUS
				getHeight: this.$util.getWXStatusHeight(),
				// #endif
				// #ifdef H5
				isWeixin: this.$wechat.isWeixin(),
				// #endif
			}
		},
		methods: {
			getWiningIndex() {
				this.$emit('getWiningIndex', this.rotating);
			},
			random(min, max) {
				return parseInt(Math.random() * (max - min + 1) + min)
			},
			rotating(param) {
				const config = {
					duration: 5000,
					circle: 8,
					mode: "ease-in-out"
				}
				// 计算角度
				const angle =
					// 初始角度
					this.rotateAngle +
					// 多旋转的圈数
					config.circle * 360 +
					// 奖项的角度
					this.angleList[param.winingIndex] -
					(this.rotateAngle % 360);
				this.rotateAngle = angle;
				// 旋转结束后
				setTimeout(() => {
					// isRotating = false;
					this.$emit('luck_draw_finish');
				}, config.duration + 500);
			},
			// 抽奖完成
			luck_draw_finish(param) {
				this.aleartType = 2
				this.aleartStatus = true
			},
			moveHandle() {}
		},
	}
</script>

<style lang="scss" scoped>
	.lucky-wheel {
		.header {
			background-position: left bottom;
			background-repeat: no-repeat;
			background-size: 100%;
		}

		.header-content {
			position: relative;
			height: 1160rpx;
		}

		.rules-button {
			position: absolute;
			bottom: 980rpx;
			right: 0;
			width: 52rpx;
			padding: 10rpx 15rpx;
			border-radius: 16rpx 0 0 16rpx;
			background: linear-gradient(180deg, #FCF2DC 0%, #F5D494 100%);
			font-weight: 500;
			font-size: 22rpx;
			line-height: 30rpx;
			color: #E93323;
		}

		.marquee-wrapper {
			position: absolute;
			bottom: 888rpx;
			left: 50%;
			transform: translateX(-50%);
			width: 488rpx;
			height: 40rpx;
			background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.85) 49%, rgba(255, 255, 255, 0) 100%);
			overflow: hidden;
		}

		.wheel-container {
			position: absolute;
			left: 50%;
			bottom: 302rpx;
			width: 504rpx;
			height: 504rpx;
			border-radius: 50%;
			overflow: hidden;
			transform: translateX(-50%);
		}

		.wheel-prize {
			position: absolute;
			width: 100%;
			height: 100%;
			transition: transform 5000ms ease-in-out;

			.item {
				position: absolute;
				top: 0;
				left: 50%;
				width: 25%;
				height: 50%;
				padding-top: 24rpx;
				transform-origin: 0% 100%;
				text-align: center;
				font-weight: 500;
				font-size: 24rpx;
				line-height: 34rpx;
				color: #E93323;

				.image {
					display: block;
					width: 48rpx;
					height: 48rpx;
					margin: 24rpx auto 0;
				}
			}
		}

		.wheel-panel {
			position: absolute;
			width: 100%;
			height: 100%;
			transition: transform 5000ms ease-in-out;
			border-radius: 50%;
			overflow: hidden;

			.item {
				position: absolute;
				top: 0;
				left: 50%;
				width: 50%;
				height: 50%;
				background: linear-gradient(242deg, #FFF9D7 0%, #FFF7BC 100%);
				transform-origin: 0% 100%;

				&:nth-child(even) {
					background: linear-gradient(239deg, #FFCE9B 0%, #FFB764 100%);
				}
			}
		}

		.wheel-point {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);

			.draw-button {
				width: 212rpx;
				height: 276rpx;
				margin-top: -64rpx;
				background-repeat: no-repeat;
				background-size: 100% 100%;
			}

			.hand {
				position: absolute;
				top: 40rpx;
				left: 70rpx;
				width: 220rpx;
				height: 242rpx;
			}

			.button {
				position: absolute;
				top: 0;
				left: 50%;
				width: 180rpx;
				height: 180rpx;
				transform: translateX(-50%);
			}
		}

		.number-wrapper {
			position: absolute;
			bottom: 24rpx;
			left: 50%;
			height: 56rpx;
			transform: translateX(-50%);
			font-weight: 600;
			font-size: 32rpx;
			line-height: 56rpx;
			color: rgba(255, 255, 255, 0.9);
		}

		.number {
			color: #FFD68E;
		}
	}

	.main-wrapper {
		padding: 38rpx 20rpx;
		background-color: #FF3433;
		background-image: url();
		background-repeat: no-repeat;
		background-size: 100%;
	}

	.record-wrapper {
		.wrapper-header {
			padding: 42rpx 0 40rpx;

			.title {
				padding: 0 74rpx;
				background-position: left center, right center;
				background-repeat: no-repeat;
				background-size: 54rpx 24rpx;
				font-weight: 700;
				font-size: 36rpx;
				line-height: 36rpx;
				color: rgba(255, 254, 239, 0.90);
			}
		}

		.wrapper-main {
			height: 352rpx;
			padding: 44rpx 60rpx 0;
			background-repeat: no-repeat;
			background-size: 100% 100%;
			box-sizing: border-box;

			.item {
				padding-left: 42rpx;
				margin-bottom: 34rpx;
				background-image: url();
				background-position: left center;
				background-repeat: no-repeat;
				background-size: 32rpx 29rpx;
				font-size: 24rpx;
				line-height: 34rpx;
				color: #333333;
			}

			.mark {
				margin: 0 20rpx;
				color: #E93323;
			}
		}
	}

	.prize-wrapper {
		margin-top: 60rpx;

		&.mine .wrapper-main {
			.list {
				margin-right: 0;
			}

			.item {
				flex-wrap: nowrap;
				width: auto;
				margin: 0 0 32rpx;
				text-align: left;
				font-size: 24rpx;
				line-height: 34rpx;

				&.th {
					font-weight: 500;
					font-size: 28rpx;
					line-height: 40rpx;
				}
			}

			.mark {
				width: 152rpx;
				padding-left: 8rpx;
			}

			.time {
				width: 266rpx;
			}
		}

		.wrapper-header {
			padding-right: 32rpx;
			background-image: url();
			background-position: left 8rpx;
			background-repeat: no-repeat;
			background-size: 100% 100%;

			.title-box {
				padding: 48rpx 0 54rpx 32rpx;
				background-position: right top;
				background-repeat: no-repeat;
				background-size: 114rpx 114rpx;
			}

			.title {
				padding: 0 74rpx;
				background-position: left center, right center;
				background-repeat: no-repeat;
				background-size: 54rpx 24rpx;
				font-weight: 700;
				font-size: 36rpx;
				line-height: 36rpx;
				color: #E93323;
			}
		}

		.wrapper-main {
			padding: 6rpx 32rpx 8rpx;
			border-radius: 0 0 32rpx 32rpx;
			background-color: #FFF3E2;

			.list {
				margin-right: -35rpx;
			}

			.item {
				width: 192rpx;
				margin: 0 35rpx 30rpx 0;
				text-align: center;
				font-size: 26rpx;
				line-height: 36rpx;
				color: #333333;
			}

			.image-wrap {
				width: 192rpx;
				height: 192rpx;
				border: 4rpx dotted #FFB87E;
				border-radius: 24rpx;
				margin-bottom: 20rpx;
				background: #FFFFFF;
			}

			.image {
				width: 100%;
				height: 100%;
				border-radius: 24rpx;
				object-fit: contain;
			}
		}
	}

	.rules-popup {
		position: fixed;
		top: 50%;
		left: 50%;
		z-index: 1001;
		display: none;
		width: 620rpx;
		padding: 94rpx 38rpx 0;
		border: 10rpx solid #FED59C;
		border-radius: 48rpx;
		background-color: #FFFFFF;
		transform: translate(-50%, -50%);

		&.active {
			display: block;
		}

		.popup-top {
			position: absolute;
			top: -24rpx;
			left: 50%;
			width: 396rpx;
			height: 87rpx;
			padding-top: 14rpx;
			background-image: url();
			background-repeat: no-repeat;
			background-size: 100% 100%;
			transform: translateX(-50%);
			text-align: center;

			.title {
				display: inline-block;
				padding: 0 48rpx;
				background-image: url(),
					url();
				background-position: left center, right center;
				background-repeat: no-repeat;
				background-size: 37rpx 13rpx;
				font-weight: 500;
				font-size: 36rpx;
				line-height: 50rpx;
				color: #E93323;
			}
		}

		.popup-center {
			height: 572rpx;
			font-size: 28rpx;
			line-height: 44rpx;
			color: #333333;
		}

		.popup-bottom {
			padding: 24rpx 0;

			.button {
				height: 80rpx;
				border-radius: 40rpx;
				background-color: #E93323;
				font-weight: 500;
				font-size: 28rpx;
				color: #FFFFFF;
			}
		}

	}

	.share-box {
		z-index: 1300;
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.invite-people-placeholder {
		height: 120rpx;
	}

	.invite-people-wrap {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 2;
		background-color: #FFFFFF;
	}

	.invite-people-inner {
		background-color: rgba(233, 51, 35, 0.1);
	}

	.invite-people {
		padding: 28rpx 32rpx 28rpx 150rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-image: url();
		background-position: 32rpx center;
		background-repeat: no-repeat;
		background-size: 102rpx;

		.invite {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 136rpx;
			height: 64rpx;
			font-size: 24rpx;
			font-weight: 500;
			color: #FFFFFF;
			background: linear-gradient(90deg, #FF7931 0%, #E93323 100%);
			box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(138, 0, 0, 0.2726);
			border-radius: 32rpx;
		}
	}
</style>